<template>
  <div class="Bigtree">

    <SkyLayoutRow type="flex" align="middle">
      <SkyLayoutCol :width="300">
        <SkyInput v-model="inputValue" placeholder="关键字搜索" style="margin-bottom:20px;margin:10px 20px"></SkyInput>
      </SkyLayoutCol>
      <SkyLayoutCol :span="6">
        <SkyButton type="primary" @click="search">搜索</SkyButton>
      </SkyLayoutCol>
    </SkyLayoutRow>

    <SkyCardPanel title="树形大数据">
      <div slot="header-right">
        滚动条位置 {{$refs.SkyFixedHeaderTree&&$refs.SkyFixedHeaderTree.scrollTop}}
      </div>
      <div slot="main">
        <!-- 树形表格 -->
        <SkyTreeTable ref="SkyFixedHeaderTree" LargeData closeborder autoParentSelect defaultexpend FixedHead FixedColumn :maxheight="tableHeight" TableWidth="1800" showcheckbox v-slot="row" @getCurrent="getCurrent" @checkChange="checkChange" :outsideList="SubjectList">
          <SkyTreeColumn :row="row.scope" label="序号" prop="index" width="80" fixed fixedLeftWidth="60">{{row.scope.index+1}}</SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="科目名称" prop="name" width="400" fixed fixedLeftWidth="140" deepchoice ladder showIcon>
          </SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="科目编码" prop="fullCode"></SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="科目id" prop="id"></SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="创建时间" prop="createAt" width="200">
            <SkyInput v-model="row.scope.createAt" placeholder="请输入内容"></SkyInput>
          </SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="科目层级" prop="level" width="200">
            <SkyInput v-model="row.scope.level" placeholder="请输入内容"></SkyInput>
          </SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="描述" prop="remarks" width="200">
            <SkyInput v-model="row.scope.remarks" placeholder="请输入内容"></SkyInput>
          </SkyTreeColumn>
          <SkyTreeColumn :row="row.scope" label="科目位置" prop="fullPosition" width="200">
            <SkyInput v-model="row.scope.fullPosition" placeholder="请输入内容"></SkyInput>
          </SkyTreeColumn>
        </SkyTreeTable>
      </div>
    </SkyCardPanel>

  </div>
</template>

<script>
  import resultData from './data.json'

  export default {
    data () {
      return {
        tableHeight: 100,
        inputValue: '',
        SubjectList: [//列表数据
          {
            id: 10,
            parentId: 0,
            name: 'xxx',
            fullCode: 'yyy',
          }
        ],
      }
    },
    methods: {
      async init () {
        let list = []
        resultData.result.map((item) => {
          let obj = {
            id: item.id,
            parentId: item.parentId,
            name: item.name,
            fullCode: item.fullCode,
            createAt: item.createAt,
            level: item.level,
            remarks: item.remarks,
            fullPosition: item.fullPosition,
          }
          list.push(obj)
        })
        this.SubjectList = list
        console.log(list)
      },
      getCurrent (row, type) {
        console.log(row, type)
      },
      checkChange (row, type) {
        console.log(row, type)
      },
      search () {
        this.$refs.SkyFixedHeaderTree.searchFilter(this.inputValue, 'name')
      }
    },
    mounted () {
      this.init()
      this.tableHeight = document.body.offsetHeight - 230;
    }
  }
</script>

<style lang="scss" scoped>
.Bigtree {
  /deep/ [class*="col-"] {
    background-color: transparent !important;
  }
}
</style>